{extend name="base" /} {block name="css"}
<link rel="stylesheet" href="__CSS__/custom.css"> {/block} {block name="js"}
<script src="__JS__/custom/customMethods.js"></script>
<script src="__JS__/custom/customMain.js"></script> {/block} {block name="body"}
<div id="loading"></div>
<div class="layui-body">

    <div style="padding: 30px 30px 30px 0px;" class="mdui-theme-primary-Grey mdui-theme-accent-Grey">
        <div class="mdui-tab" mdui-tab>
            <a href="#example1-tab1" class="mdui-ripple">客服列表</a>
            <a href="#example1-tab2" class="mdui-ripple">添加客服</a>
            <a href="#example1-tab3" class="mdui-ripple">在线客服</a>
        </div>

        <!-- 客服列表 -->
        <div id="example1-tab1" class="mdui-p-a-2">
            <div class="mdui-table-fluid" id="customList">
                <div style="margin:5px;">
                    <button @click="confirmController();" class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple mdui-color-green mdui-text-color-white-text">初始化客服密码</button>
                    <button @click="syncMsgInfo();" class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple mdui-color-green mdui-text-color-white-text">同步历史对话信息</button>
                </div>

                <table class="mdui-table">
                    <thead class="mdui-color-orange-200">
                        <tr>
                            <th class="mdui-text-color-black-text">客服id</th>
                            <th class="mdui-text-color-black-text">客服账号</th>
                            <th class="mdui-text-color-black-text">昵称</th>
                            <th class="mdui-text-color-black-text">总对接数</th>
                            <th class="mdui-text-color-black-text">当天对接数</th>
                            <th class="mdui-text-color-black-text">在线</th>
                            <th class="mdui-text-color-black-text">状态
                                <span style="font-size:8px;font-weight:100;">(是否开启对接用户)</span>
                            </th>
                            <th class="mdui-text-color-black-text">操作</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in custom">
                            <td>{{item.id}}</td>
                            <td>{{item.username}}</td>
                            <td>{{item.nickname}}</td>
                            <td>{{item.online_butt}}</td>
                            <td>{{item.today_butt}}</td>
                            <td class="online" v-if="item.type == 1">在线</td>
                            <td class="basy" v-if="item.type == 2">忙碌</td>
                            <td class="outline" v-if="item.type == 3">离线</td>
                            <td>
                                <label class="mdui-switch">
                                    <input type="checkbox" :checked="item.status?true:false" @change="isenable(index)" />
                                    <i class="mdui-switch-icon"></i>
                                </label>
                            </td>
                            <td>
                                <button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple mdui-color-blue mdui-text-color-white-text"
                                    v-on:click="defaultReply(item.id)">离线回复</button>
                                <button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple mdui-color-blue mdui-text-color-white-text"
                                    v-on:click="getFansList(item.id)">聊天记录</button>
                                <!-- <button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple mdui-color-blue mdui-text-color-white-text"
                                    v-on:click="inviteCustom(item)">邀请客服</button> -->
                                <!-- <button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple mdui-color-pink-accent" v-on:click="deleteCustom(item.kf_account)">删除客服</button> -->

                                <button v-on:click="editCustom(item)" class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple mdui-color-green mdui-text-color-white-text">修改</button>

                            </td>

                        </tr>
                    </tbody>
                </table>

            </div>
            <div class="iPages" id="pages01"></div>
        </div>
        <!-- 添加客服 -->
        <div id="example1-tab2" class="mdui-p-a-2">
            <div style="padding: 30px 30px 30px 0px; max-width: 600px;" class="mdui-theme-primary-Grey mdui-theme-accent-Grey ">
                <form action="">
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <label class="mdui-textfield-label">客服账号</label>
                        <input class="mdui-textfield-input" type="客服账号" name="username" />
                        <!-- <div class="mdui-textfield-helper">客服账号必须以 @jmqb2018 为后缀</div> -->
                    </div>
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <label class="mdui-textfield-label">昵称</label>
                        <input class="mdui-textfield-input" type="昵称" name="nickname" />
                    </div>
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <label class="mdui-textfield-label">密码</label>
                        <input class="mdui-textfield-input" type="password" name="password" />
                    </div>
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <label class="mdui-textfield-label">确认密码</label>
                        <input class="mdui-textfield-input" type="password" name="confirm_password" />
                    </div>
                    <div style="margin-top: 25px;">
                        <img src="" class="customImg" alt="">
                        <input type="file" name="file" class="layui-upload-file" lay-title="上传头像">
                    </div>
                    <div style="margin-top: 25px;">
                        <button type="button" id="sumbitCustomList" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-green-600 mdui-text-color-white-text">确认</button>
                        <button type="reset" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-amber-900 mdui-text-color-white-text">重置</button>
                    </div>

                </form>
            </div>
        </div>

        <!-- 在线客服 -->
        <div id="example1-tab3" class="mdui-p-a-2">
            <div class="mdui-table-fluid" id="onlineCustom">
                <table class="mdui-table">
                    <thead class="mdui-color-orange-200">
                        <tr>
                            <th class="mdui-text-color-black-text">客服id</th>
                            <th class="mdui-text-color-black-text">客服账号</th>
                            <th class="mdui-text-color-black-text">对接人数</th>
                            <th class="mdui-text-color-black-text">状态</th>
                            <th class="mdui-text-color-black-text">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in onlineCustomList">
                            <td>{{item.kf_id}}</td>
                            <td>{{item.kf_account}}</td>
                            <td>{{item.accepted_case}}</td>
                            <td v-if="item.status == 1">web在线</td>
                            <td>
                                <button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple mdui-color-blue mdui-text-color-white-text">查看详情</button>
                                <!-- <button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple mdui-color-pink-accent">删除客服</button>
                            <button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple mdui-color-green mdui-text-color-white-text">修改</button> -->
                            </td>
                        </tr>
                    </tbody>
                </table>


            </div>

            <div class="iPages" id="pages02"></div>
        </div>





    </div>


    <!-- 绑定客服微信号 -->
    <div id="invitePopup">
        <div class="invite_box">
            <form action="" id="invisteForm">
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">客服账号</label>
                    <input class="mdui-textfield-input" id="inviteCustomAccount" type="text" value="" name="username" readonly=“ readonly”>
                </div>
                <div class="mdui-textfield mdui-textfield-floating-label">
                    <label class="mdui-textfield-label">绑定微信号</label>
                    <input class="mdui-textfield-input" id="inviteCustomWechat" type="绑定微信号" name="wehat_num" />
                </div>
                <div style="margin-top: 25px;">
                    <button type="button" id="sumbitCustomWechat" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-green-600 mdui-text-color-white-text">确认</button>
                    <button type="button" id="resetButton" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-amber-900 mdui-text-color-white-text">取消</button>
                </div>

            </form>
        </div>

    </div>



    <!-- 修改客服信息 -->
    <div id="editCustomMessage">
        <div class="edit_box">
            <input id="editCustomAccount" type="hidden">
            <div class="mdui-textfield">
                <label class="mdui-textfield-label">昵称</label>
                <input class="mdui-textfield-input" id="editCustomNick" type="text" value="" name="nickname">
            </div>
            <!-- <div class="mdui-textfield mdui-textfield-floating-label">
                <label class="mdui-textfield-label">旧密码</label>
                <input class="mdui-textfield-input" id="editCustomOldPwd" type="password" name="old_password" />
            </div> -->
            <div class="mdui-textfield mdui-textfield-floating-label">
                <label class="mdui-textfield-label">新密码</label>
                <input class="mdui-textfield-input" id="editCustomNewPwd" type="password" name="password" />
            </div>
            <div class="mdui-textfield mdui-textfield-floating-label">
                <label class="mdui-textfield-label">确认密码</label>
                <input class="mdui-textfield-input" id="editCustomCfrPwd" type="password" name="confirm_password" />
            </div>
            <div style="margin-top: 25px;">
                <img src="" class="editCustomImg" alt="">
                <input type="file" name="file" class="layui-upload-file" lay-title="上传头像">
            </div>
            <div style="margin-top: 25px;">
                <button type="button" id="sureEditCustomMessage" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-green-600 mdui-text-color-white-text">确认</button>
                <button id="cancelEdit" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-amber-900 mdui-text-color-white-text">取消</button>
            </div>
        </div>
    </div>

    <div id="showConfirm">
        <div class="edit_box" style="width: 250px;border-radius: 5px;padding: 15px;">
            <p>确认初始化所有客服密码？</p>
            <div style="margin-top: 50px;">
                <button type="button" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-green-600 mdui-text-color-white-text" onclick="iniPassword();">确认</button>
                <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-amber-900 mdui-text-color-white-text" onclick="cancelControllerPassword();">取消</button>
            </div>
        </div>
    </div>


</div>
{/block}